<template>
  <div>
    <ul>
      <li style="background:#f0b45f;">
        <h1>{{ orderCount }}</h1>
        <h3>订单数量</h3>
      </li>
      <li style="background:#5cb85c;">
        <h1>{{ productCount }}</h1>
        <h3>产品数量</h3>
      </li>
      <li style="background:#5db8d3;">
        <h1>{{ userCount }}</h1>
        <h3>用户数量</h3>
      </li>
    </ul>
  </div>
</template>

<script>
import { getHome } from "@/utils/api";
export default {
  name: "",

  data() {
    return {
      orderCount: 0,
      productCount: 0,
      userCount: 0
    };
  },
  mounted() {
    getHome().then(res => {
      this.userCount = res.data.data.userCount;
      this.productCount = res.data.data.productCount;
      this.orderCount = res.data.data.orderCount;
    });
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li {
    list-style: none;
    width: 30%;
    height: 80%;
    color: white;
    line-height: 100px;
    h1 {
      font-size: 60px;
    }
  }
  li:hover{
    transform: scale(1.1);
    color:black;
    transition: all 1s;
  }
}
</style>
